<template>
  <div>
    <Calendar v-model="value">
      <template #month="{ date, data }">
        <div @click="show(data.day)" style="width:130px;height:99px">
          <!--  <div v-for="(item, index) in user.todolist" :key="index">
            <Badge status="warning" text="看苹果发布会" v-if="data.day === '2022-12-11'" />
            <Badge status="success" text="中秋节" v-if="data.day === '2022-12-13'" />
            <div v-if="item.status == '0'">
              {{ ok++ }}
            </div>
            <Badge style="left:18px" status="success" v-if="(data.day === item.startDate.substring(0, 10))" />
          </div> -->

          <!--  <Badge style="left:18px" status="success" :text=user.todolist.length /><br> -->
          <!-- <Badge status="warning" showTotal(data.day) /> -->
          <!-- <Badge status="success" text="什么" v-if="data.year = 2022 - 12" /> -->
          <!-- <Badge status="success" v-if="date = 2022 - 12" /> -->
          <span style="white-space: pre-wrap;left: 30px;text-align: center;">
            <!--  <Badge status="success" :text="showTotal(data.day)" /> -->

            {{ showTotal(data.day) }}
          </span>
        </div>
      </template>
    </Calendar>
  </div>
  <showToDoList v-model="user.show"></showToDoList>
</template>
<script>
import axios from 'axios'
import userCount from '@/stores/userCount.js'
import showToDoList from '@/views/Form/showToDoList.vue'
import { computed } from "vue";
export default {
  data() {
    return {
      user: userCount(),
      /* visible: false, */
      todaylist: [],
      ok: 0,
      notok: 0,
      type: {
        month: '月',
        year: '年'
      },
      showTotal(day) {
        const arr = this.user.todolist.filter(item => item.startDate.substring(0, 10) === day)
        const arr1 = this.user.todolist.filter(item => item.startDate.substring(0, 10) === day).filter(item => item.status == "1")
        if (arr.length > 0) {
          return '待办:' + (arr.length - arr1.length) + '\n' + '' + ' 完成:' + arr1.length
        } else {
          return ''
        }
      }
    }
  },
  methods: {
    show(day) {
      // this.visible = true
      this.user.show = true
      this.user.day = day
      axios.post('http://localhost:8080/content/findTodayList',
        { "userId": this.user.userid, "startDate": day }).then(resp => {
          this.user.todaylist = resp.data
        })
    }
  },

  components: {
    showToDoList
  }
}
</script>
